import React, {memo, useEffect, useState} from "react";
import {HeaderRightWarpper} from "@/components/app-header/c-cpns/header-right/style";
import Icon_global from "@/assets/svg/icon_global";
import Icon_menu from "@/assets/svg/icon_menu";
import Icon_avatar from "@/assets/svg/icon_avatar";

/**
 * @type {React.NamedExoticComponent<object>}
 */
const HeaderRight = memo(() => {

    const [showPannel,setShowPannel] = useState(false)
    function menuButtonOnClick() {
        setShowPannel(true)
    }
    useEffect(()=>{
        const lister = e => {
            setShowPannel(false)
        }
        window.addEventListener("click",lister,true)

        return ()=>{
            window.removeEventListener('click',lister,true)
        }
    },[])
    return (
        <HeaderRightWarpper>
            <div className='btns'>
                <span className='btn'>登录</span>
                <span  className='btn'>注册</span>
                <span className='btn'>
                    <Icon_global />
                </span>
            </div>

            <div className='userset' onClick={menuButtonOnClick}>
                <div className='redDot' ></div>
                <Icon_menu />
                <Icon_avatar />
                {
                    showPannel && (<div className='panel'>
                        <div className='top'>
                            <div className="itemtext">注册</div>
                            <div className="itemtext">登录</div>
                        </div>
                        <div className="bottom">
                            <div className="itemtext">出租房源</div>
                            <div className="itemtext">开展体验</div>
                            <div className="itemtext">帮助</div>
                        </div>
                    </div>)
                }

            </div>
        </HeaderRightWarpper>
    )
})
export default HeaderRight
